<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>

    </style>
</head>

<body>

<!-- 正文开始 -->
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-xs12 layui-col-md6" >
            <div  >
                <div class="layui-card-header layui-col-xs6 layui-col-sm6 layui-col-lg6" style="font-weight: bold">每日营业现金收入和营业日当日交账数据趋势</div>
                <div style="padding-top: 10px;padding-right: 10px;">
                    <el-date-picker
                            type="daterange"
                            placeholder="选择日期"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            v-on:change="selectCashAndPay"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            v-model="search.date"
                    >
                    </el-date-picker>
                </div>
                <div class="layui-card-body" >
                        <div id="main" style="width: 100%;height: 400px;"></div>

                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-md6" >
            <div  >
                <div class="layui-card-header layui-col-xs6 layui-col-sm6 layui-col-lg6" style="font-weight: bold">每日营业现金收入和每日交账数据</div>
                <div style="padding-top: 10px;padding-right: 10px;">
                    <el-date-picker
                            type="daterange"
                            placeholder="选择日期"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            v-on:change="selectUndetermined"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            v-model="search.date1"
                    >
                    </el-date-picker>
                </div>
                <div class="layui-card-body" >
                    <div id="main1" style="width: 100%;height: 400px;"></div>

                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div>
                <div class="layui-card-header layui-col-xs6 layui-col-sm6 layui-col-lg6" style="font-weight: bold">每日营业数据</div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-lg6">
                <div class="block" style="float: right;padding-top: 10px;padding-right: 10px;">
                    <el-date-picker
                            type="daterange"
                            placeholder="选择日期"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            v-on:change="selectYingYe"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            v-model="search.date2"
                    >
                    </el-date-picker>
                </div>
            </div>
                <div class="layui-card-body" style="overflow: hidden;">
                    <div id="shopMap2" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div>
                <div class="layui-card-header layui-col-xs6 layui-col-sm6 layui-col-lg6" style="font-weight: bold">每日交账数据</div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-lg6">
                    <div class="block" style="float: right;padding-top: 10px;padding-right: 10px;">
                        <el-date-picker
                                type="daterange"
                                placeholder="选择日期"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                v-on:change="selectPayAll"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                v-model="search.date3"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <div class="layui-card-body" style="overflow: hidden;">
                    <div id="shopMap1" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>




    </div>

</div>
</div>
<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>
<script  type="text/javascript" src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script  type="text/javascript" src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
<script  type="text/javascript" src="${ctxPath}/assets/common/module/vuejs/vue.min.js?v=${constants.getReleaseVersion()}"></script>
<script  type="text/javascript" src="${ctxPath}/assets/common/module/vuejs/vue-resource.min.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<script>
    layui.use(['layer', 'element','laydate',], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var laydate = layui.laydate;

        new Vue({
            el: '#app',
            data(){
                return {
                    date:'',
                    cashAndPayStartDate:'',
                    cashAndPayEndDate:'',
                    cashStartDate:'',
                    cashEndDate:'',
                    yingYeStartDate:'',
                    yingYeEndDate:'',
                    payAllStartDate:'',
                    payAllEndDate:'',
                    search: {
                        date:[],
                        date1:[],
                        date2:[],
                        date3:[],
                    },


                }
            },
            mounted(){
                //第一个图
                this.cashAndPayStartDate = this.getLastMonth() //获取开始日期的初始值
                this.cashAndPayEndDate = this.fetchData()//获取结束日期的初始值
                let statics=[]
                statics.push(this.cashAndPayStartDate)
                statics.push(this.cashAndPayEndDate)
                this.$set(this.search,'date',statics)
                //第二个图
                this.cashStartDate = this.getLastMonth() //获取开始日期的初始值
                this.cashEndDate = this.fetchData()//获取结束日期的初始值
                let statics1=[]
                statics1.push(this.cashStartDate)
                statics1.push(this.cashEndDate)
                this.$set(this.search,'date1',statics1)
                //第三个图
                this.cashStartDate = this.getLastMonth() //获取开始日期的初始值
                this.cashEndDate = this.fetchData()//获取结束日期的初始值
                let statics2=[]
                statics2.push(this.yingYeStartDate)
                statics2.push(this.yingYeEndDate)
                this.$set(this.search,'date2',statics2)
                //第四个图
                this.cashStartDate = this.getLastMonth() //获取开始日期的初始值
                this.cashEndDate = this.fetchData()//获取结束日期的初始值
                let statics3=[]
                statics3.push(this.payAllStartDate)
                statics3.push(this.payAllEndDate)
                this.$set(this.search,'date3',statics3)
                this.getLastMonth()
                this.fetchData()
                this.getEveryday();//每日营业现金收入和每日交账数据趋势
                this.getUndetermined();
                this.getDaydata();//每日营业数据
                this.getAccount();//每日交账数据
            },


            methods: {
                getLastMonth(){
                    var date = new Date();
                    var year = date.getFullYear();   //当前年：四位数字
                    var month = date.getMonth();
                    var day=date.getDate();
                    //当前月：0-11 (0是12月)
                    if (month == 0) {
                        year -= 1;
                        month = 12;
                    }
                    month = month < 10 ? ('0' + month) : month;   //月份格式化：月份小于10则追加个0
                    day = day < 10 ? ('0' + day) : day;
                    let lastYearMonth = year + '-' + month + '-' + day;
                    this.cashAndPayStartDate = lastYearMonth
                    this.yingYeStartDate = lastYearMonth
                    this.cashStartDate = lastYearMonth
                    this.payAllStartDate = lastYearMonth
                    return lastYearMonth
                },
                fetchData() {
                    let date = new Date()
                    let y = date.getFullYear()
                    let m = date.getMonth() + 1
                    let d = date.getDate()
                    m = m < 10 ? ('0' + m) : m;
                    d = d < 10 ? ('0' + d) : d;
                    let time = y + '-' + m + '-' + d
                    this.cashAndPayEndDate = time
                    this.yingYeEndDate = time
                    this.payAllEndDate = time
                    this.cashEndDate = time
                    return time

                },
                selectCashAndPay(value) {
                    this.cashAndPayStartDate = value[0]
                    this.cashAndPayEndDate = value[1]
                    this.getEveryday()
                },
                selectYingYe(value) {
                    this.yingYeStartDate = value[0]
                    this.yingYeEndDate = value[1]
                    this.getDaydata()
                },
                selectPayAll(value) {
                    this.payAllStartDate = value[0]
                    this.payAllEndDate = value[1]
                    this.getAccount()
                },
                selectUndetermined(value){
                    console.log(value)
                    this.cashStartDate = value[0]
                    this.cashEndDate = value[1]
                    this.getUndetermined()
                },
                // 每日营业现金收入和每日交账数据趋势
                getUndetermined() {
                    let formData = new FormData()
                    formData.append("startDate", this.cashStartDate)
                    formData.append("endDate", this.cashEndDate)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPaymentOrder/getCash", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                let xUndetermined = []
                                let yUndetermined = []
                                let yyUndetermined = []
                                res.data.map(item => {
                                    xUndetermined.push(item.yyr)
                                    yUndetermined.push(item.sumTodayCash)
                                    yyUndetermined.push(item.payAll)
                                })
                                this.cash(xUndetermined, yUndetermined, yyUndetermined)
                            }
                        })
                    // var chartDom = document.getElementById('main');

                },

                cash(xUndetermined, yUndetermined, yyUndetermined) {
                    var myChart = echarts.init(document.getElementById('main1'),);
                    // var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        // title: {
                        //     text: '金额',
                        // },
                        color: ['#D7AB82', '#ff6600',],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['每日营业现金收入', '每日现金交账总金额']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xUndetermined
                        },
                        yAxis: {
                            name: '金额',
                            type: 'value'
                        },
                        series: [
                            {
                                name: '每日营业现金收入',
                                type: 'line',
                                data: yUndetermined
                            },
                            {
                                name: '每日现金交账总金额',
                                type: 'line',
                                data: yyUndetermined
                            },

                        ]
                    };
                    myChart.setOption(option);
                    // 窗口大小改变事件
                    window.onresize = function () {
                        myChart.resize();
                    };
                },

                //每日营业现金收入和营业日当日交账数据趋势
                getEveryday() {
                    let formData = new FormData()
                    formData.append("startDate", this.cashAndPayStartDate)
                    formData.append("endDate", this.cashAndPayEndDate)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPaymentOrder/getCashAndPay", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                let xEveryday = []
                                let yEveryday = []
                                let yyEveryday = []
                                res.data.map(item => {
                                    xEveryday.push(item.yyr)
                                    yEveryday.push(item.sumTodayCash)
                                    yyEveryday.push(item.sumTodayPay)
                                })
                                this.cashAndPay(xEveryday, yEveryday, yyEveryday)
                            }
                        })
                    // var chartDom = document.getElementById('main');

                },

                cashAndPay(xEveryday, yEveryday, yyEveryday) {
                    var myChart = echarts.init(document.getElementById('main'),);
                    // var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        // title: {
                        //     text: '金额',
                        // },
                        color: ['#D7AB82', '#ff6600',],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['每日营业现金收入', '营业日当日交账数据']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xEveryday
                        },
                        yAxis: {
                            name: '金额',
                            type: 'value'
                        },
                        series: [
                            {
                                name: '每日营业现金收入',
                                type: 'line',
                                data: yEveryday
                            },
                            {
                                name: '营业日当日交账数据',
                                type: 'line',
                                data: yyEveryday
                            },

                        ]
                    };
                    myChart.setOption(option);
                    // 窗口大小改变事件
                    window.onresize = function () {
                        myChart.resize();
                    };
                },
                // 每日营业数据
                getDaydata() {
                    let formData = new FormData()
                    formData.append("startDate", this.yingYeStartDate)
                    formData.append("endDate", this.yingYeEndDate)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPaymentOrder/getYingYe", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                let xDaydata = []
                                let yDaydata = []
                                let yyDaydata = []
                                let yyyDaydata = []

                                res.data.map(item => {
                                    xDaydata.push(item.yyr)
                                    yDaydata.push(item.sumTodayXj)
                                    yyDaydata.push(item.sumTodayRecharge)
                                    yyyDaydata.push(item.sumTodayCash)
                                })
                                this.yingYe(xDaydata, yDaydata, yyDaydata, yyyDaydata)
                            }
                        })
                },
                yingYe(yyr, sumTodayXj, sumTodayRecharge, sumTodayCash) {
                    // var chartDom = document.getElementById('shopMap2');
                    var myChart = echarts.init(document.getElementById('shopMap2'));
                    // var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        // title: {
                        //     text: '金额'
                        // },
                        color: ['#EB8146', '#FFBB71', '#FFAE9F'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['每日营业现金收入', '每日营业现金消费', '每日营业现金充值']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: yyr
                        },
                        yAxis: {
                            name: '金额',
                            type: 'value'
                        },
                        series: [
                            {
                                name: '每日营业现金收入',
                                type: 'line',
                                data: sumTodayXj
                            },
                            {
                                name: '每日营业现金消费',
                                type: 'line',
                                data: sumTodayRecharge
                            },
                            {
                                name: '每日营业现金充值',
                                type: 'line',
                                data: sumTodayCash
                            }
                        ]
                    };
                    myChart.setOption(option);
                    // 窗口大小改变事件
                    window.onresize = function () {
                        myChart.resize();
                    };
                },
                getAccount() {
                    let formData = new FormData()
                    formData.append("startDate", this.payAllStartDate)
                    formData.append("endDate", this.payAllEndDate)
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btyPaymentOrder/getPayAll", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                let xAccount = []
                                let yAccount = []
                                let yyAccount = []
                                let yyyAccount = []

                                res.data.map(item => {
                                    xAccount.push(item.xjAll)
                                    yAccount.push(item.xjbzAll)
                                    yyAccount.push(item.payAll)
                                    yyyAccount.push(item.payDay)
                                })
                                this.payAllStatics(xAccount, yAccount, yyAccount, yyyAccount)
                            }
                        })
                },
                // 每日交账数据
                payAllStatics(xjAll, xjbzAll, payAll, payDay) {
                    var chartDom = document.getElementById('shopMap1');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        // title: {
                        //     text: '金额'
                        // },
                        color: ['#D87A80', '#D08773', '#EA7E53'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['每日交账总金额', '每日消费现金交账总额', '每日充值现金交账总额',]
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: payDay
                        },
                        yAxis: {
                            name: '金额',
                            type: 'value'
                        },
                        series: [
                            {
                                name: '每日交账总金额',
                                type: 'line',
                                data: xjAll
                            },

                            {
                                name: '每日消费现金交账总额',
                                type: 'line',
                                data: xjbzAll
                            },
                            {
                                name: '每日充值现金交账总额',
                                type: 'line',
                                data: payAll
                            },

                        ]
                    };
                    myChart.setOption(option);
                    // 窗口大小改变事件
                    window.onresize = function () {
                        myChart.resize();
                    };

                },
            },

        });

        // 获取当前年份
        function doHandleYear(tYear) {
            var myDate = new Date();
            var tYear = myDate.getFullYear();
            return tYear;
        }


    });
</script>

</body>

</html>

